<template>
    <div>
        <el-row>
            <el-col :span="10" v-for="(problem, index) in problemList" :key="index" :offset="1">
                <el-card :body-style="{ padding: '0px' }">
                    <div slot="header">
                        标题：
                        <span v-if="!problem.title.startsWith('http')">{{ problem.title }}</span>
                        <img :src="problem.title" class="image" v-if="problem.title.startsWith('http')">
                        <el-button type="text" class="button">加入试卷</el-button>
                    </div>
                    <div class="content">
                        答案：
                        <span v-if="!problem.content.startsWith('http')">{{ problem.content }}</span>
                        <img :src="problem.content" class="image" v-if="problem.content.startsWith('http')">
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import API from '../plugins/axios'
export default {
    data() {
        return {
            problemList: [
                {
                    title: '',
                    content: ''

                }
            ]
        }
    },
    mounted: function () {
        API({
            url: '/problem/getProblemList',
            method: 'get'
        }).then((res) => {
            console.log(res.data.data);
            this.problemList = res.data.data;
        });

    }
}
</script>

<style scoped>
.button {
    padding: 0;
    float: right;
}

.image {
    width: 200px;
    height: 150px;
    object-fit: cover;
}


.content{
    margin-left: 20px;
    margin-top: 20px;
}

.el-card {
    margin: 20px;
    padding: 30px;
    width: 500px;
    height: 400px;
}
</style>
